<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>交通事故效果</title>
    <link rel="stylesheet" href="css/index.css" type="text/css">
    <link rel="stylesheet" href="css/leaflet.css" type="text/css">
    <link rel="stylesheet" href="css/leaflet.marker.highlight.css" type="text/css">
    <link rel="stylesheet" href="css/timePlay.css" type="text/css">
    <script src="js/leaflet.js"></script>
    <script src="js/leaflet.marker.highlight.js"></script>
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/timePlay.js" type="text/javascript" charset="utf-8"></script>
</head>
<body style="width: 100vw;height: 100vh">
<div class="root" style="width: 20%">
    <div style="width: 100%;height: 50%;">
        <div class="title">现场画面1</div>
        <img src="img/14.jpg" style="margin-top: 50px;width:100%;background-size: 100% 100%">
    </div>
    <div style="width: 100%;height: 50%">
        <div class="title">现场画面2</div>
        <img src="img/14.jpg" style="margin-top: 50px;width:100%;background-size: 100% 100%">
    </div>
</div>
<div class="root" style="width: 60%">
    <div style="width: 100%;height: 80%" id="map">
    </div>
    <div style="width: 100%;height: 20%">
        <div class="title">详细信息</div>
        <table border="1">
            <tr>
                <td>驾驶员状态</td>
                <td>车辆状态</td>
                <td>财产损失</td>
                <td>事故原因</td>
                <td>发生时间</td>
                <td>发生地点</td>
                <td>道路类型</td>
                <td>经度</td>
                <td>纬度</td>
            </tr>
            <tr>
                <td>正常</td>
                <td>严重损毁</td>
                <td>一般</td>
                <td>超速驾驶</td>
                <td>2018年12月19日</td>
                <td>XX路</td>
                <td>十字路口</td>
                <td>103.825666444</td>
                <td>30.1887858928</td>
            </tr>
        </table>
    </div>
</div>
<div class="root" style="width: 20%">
    <div style="width: 100%;height: 33%">
        <div class="title">事故成因</div>
        <ul>
            <li>
                车辆超速
            </li>
            <li>
                地面积雪
            </li>
        </ul>
    </div>
    <div style="width: 100%;height: 33%">
        <div class="title">预警信息</div>
        <ul>
            <li>
                ...路口交通拥堵
            </li>
            <li>
                ...路口通行缓慢
            </li>
            <li>
                ...路面有积雪，可能引发交通事故
            </li>
        </ul>
    </div>
    <div style="width: 100%;height: 34%">
        <div class="title">救援信息</div>
        <ul>
            <li>
                交警已到达现场
            </li>
            <li>
                救援车辆距离现场还有1公里
            </li>
        </ul>
    </div>
</div>
<div id="timePlay"></div>
<script src="js/map.js"></script>

</body>
</html>